<template>
	<view class="main">
		<view class="order">
			<view class="order-status">
				<view class="status">
					<view class="order-status-title1">{{order_info.paystatus|status}}</view>
					<view class="order-status-title2" v-if="order_info.paystatus === 0 || order_info.paystatus === 6">剩余付款时间</view>
					<view class="order-status-title2" v-if="order_info.paystatus === 1">恭喜您已获得该藏品～</view>
					<view class="order-status-title2" v-if="order_info.paystatus === 5">再逛逛,下一个会是有缘份的藏品哦~</view>
					<view class="order-status-title2" v-if="order_info.paystatus === 7">已转售</view>
				</view>
				<view class="order-status-des">
					<view class="statusImg" v-if="order_info.paystatus === 1">
						<!-- 再逛逛,下一个会是有缘份的藏品哦~ -->
						<image src="@/static/images/complete.png" mode=""></image>
					</view>
					<view class="statusImg" v-if="order_info.paystatus === 5">
						<!-- 再逛逛,下一个会是有缘份的藏品哦~ -->
						<image src="@/static/images/cancel.png" mode=""></image>
					</view>
					<block v-if="order_info.paystatus === 0 && order_info.create_time*1000+5*60*1000-new Date().getTime()>0">
						<u-count-down :time="order_info.create_time*1000+5*60*1000-new Date().getTime()"  format="mm:ss"
							 autoStart millisecond>
						</u-count-down>
					</block>
				</view>
				<view class="line"></view>
			</view>
			<view class="order-goods">
				<view class="order-goods-title">{{order_info.special_order_type == 1?"藏品订单":"盲盒订单"}}</view>
				<!-- <view class="order-goods-number">订单编号：{{order_info.ordersn}}</view> -->
				<view class="order-goods-info">
					<image :src="order_info.img" mode="aspectFit"></image>
					<view class="order-goods-info-right">
						<view class="order-goods-info-right-title">{{ order_info.sign==0?options.tit:order_info.special_title}}
							<view class="order-goods-info-right-title-label" v-if="order_info.code">
								#{{order_info.code+'/'+order_info.all_count}}</view>
						</view>
						<view class="order-goods-info-right-price">
							<view class="order-goods-info-right-price-left">创作者:</view>
							<view class="order-goods-info-right-price-right"><text>{{order_info.mer_id}}</text></view>
						</view>
						<view class="order-goods-info-right-price">
							<view class="order-goods-info-right-price-left">卖家昵称:</view>
							<view class="order-goods-info-right-price-right">
								<text>{{order_info.company}}</text></view>
						</view>
						<view class="order-goods-info-right-price">
							<view class="order-goods-info-right-price-left">卖出价格:</view>
							<view class="order-goods-info-right-price-right"><text>¥ {{order_info.base_money}}</text>
							</view>
						</view>
						<!-- <view class="order-goods-info-right-price">
							<view class="order-goods-info-right-price-right" style="width: 100%; text-align: right;">
								<text>{{$u.timeFormat(order_info.pay_time, 'yyyy-mm-dd hh:MM:ss')}}</text></view>
						</view> -->
					</view>
				</view>
				<view class="content">
					<view class="cont">
						<view class="item dfc">
							<text>订单编号：</text>
							<view class="dfc">
								<text class="number">{{order_info.ordersn}}</text>
								<image @click="copy" class="fzicon" src="@/static/ico/pay-copy.png" mode=""></image>
							</view>
						</view>
						<view class="item dfc">
							<text>支付方式：</text>
							<text>{{order_info.paytype|paytype}}</text>
						</view>
						<view class="item dfc">
							<text>下单时间：</text>
							<text>{{$u.timeFormat(order_info.create_time, 'yyyy-mm-dd hh:MM:ss')}}</text>
						</view>
						<block v-if="order_info.fee_detail">
							<view class="item dfc">
								<text>第三方平台结算服务费：</text>
								<text>-￥{{order_info.fee_detail.trilateral_platform_fee}}</text>
							</view>
							<view class="item dfc">
								<text>平台服务费：</text>
								<text>-￥{{order_info.fee_detail.platform_fee}}</text>
							</view>
							<view class="item dfc">
								<text>创作者版权分成：</text>
								<text>-￥{{order_info.fee_detail.chuang_rate_fee }}</text>
							</view>
						</block>
						<view class="item dfc footer">
							<text>实收金额</text>
							<text style="color: #FF6868; font-size: 32rpx; font-weight: bold; margin-left: 10rpx; margin-top: -3rpx;">¥{{ order_info.money }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footerNav"
			v-if="order_info.paytype=='wechat'&&(order_info.paystatus==0 || order_info.paystatus==6)">
			<view class="savepadding savebottom" style="height: 235rpx;"></view>
			<view class="footerNav-btns savepadding savebottom">
				<button @click="show=true">取消订单</button>
				<button @click="topays">确认支付</button>
			</view>
		</view>
		<view class="footerNav" v-else>
			<view class="savepadding savebottom" style="height: 235rpx;"></view>
			<view class="footerNav-btns savepadding savebottom">
				<button class="back" @click="back">返回</button>
			</view>
		</view>
		<u-modal :show="show" @confirm="GoPle" asyncClose @cancel="show=false" title="提示" cancelColor="#A2A2A2"
			confirmColor="#00000" confirm-text="确定" show-cancel-button>
			<view style="text-align: center;">
				您确定取消该订单？
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				options: {},
				order_info: {},
				show: false,
				dataObj: {},
				time: null
			}
		},
		onReady() {

		},
		onLoad(e) {
			this.options = e
		},
		onShow() {
			this.orderInfo()
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.order_info.ordersn,
					showToast: false,
					success: () => {
						console.log('success');
						this.$u.toast('内容已复制到剪切板')
					}
				});
			},
			//立即支付
			async topays() {

				let id = this.order_info.id
				if (id) {
					this.topay(id)
				} else {
					uni.showToast({
						title: '支付失败',
						duration: 2000,
						icon: 'none'
					});
				}

				// this.loading=true
				// let data = await this.$http({
				// 	url:this.$api.payorder,
				// 	method: 'post',
				// 	hideLoading: true,
				// 	needToken:true,
				// 	data:{
				// 		id :this.order_info.id
				// 	}
				// })
				// this.loading=false
				// if(data.code==200){
				// 	uni.requestPayment({
				// 	    provider:this.order_info.paytype,
				// 	    orderInfo: data.data.body,
				// 	    success: (res)=> {
				// 	        console.log('[支付成功]',res);
				// 			uni.showToast({
				// 				title: '支付成功',
				// 				duration: 2000,
				// 				icon:'none'
				// 			});
				// 			this.orderInfo(this.order_info.id)
				// 	    },
				// 	    fail: (err)=> {
				// 			uni.showToast({
				// 				title: '支付失败',
				// 				duration: 2000,
				// 				icon:'none'
				// 			});
				// 	        console.log('[支付失败]',err);
				// 	    }
				// 	})
				// }else{
				// 	uni.$u.toast(data.msg)
				// }
			},
			//取消订单
			async GoPle() {
				this.loadings = true
				let data = await this.$http({
					url: this.$api.cancelOrder,
					method: 'post',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.order_info.id,
					}
				})
				this.loadings = false
				this.shows = false
				if (data.code == 200) {
					uni.$u.toast("取消成功")
					this.orderInfo(this.order_info.id)
				} else {
					uni.$u.toast(data.msg)
				}
			},
			async orderInfo(id) {
				let data = await this.$http({
					url: this.$api.orderInfo,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.options.id
					}
				})
				console.log('[订单详情]', JSON.stringify(data))
				if (data.code == 200) {
					this.order_info = data.data;
					this.order_info.fee_detail = JSON.parse(this.order_info.fee_detail)
					if (this.order_info.fee_detail) {
						let a = this.order_info.fee_detail
						this.order_info.money = (this.order_info.money - a.platform_fee - a.trilateral_platform_fee - a
							.chuang_rate_fee).toFixed(2)
					}
				}
			}
		},
		filters: {
			status(e) {
				switch (e) {
					case 0:
						return `待付款`
						break;
					case 1:
						return '已完成'
						break;
					case 5:
						return '已取消'
						break;
					case 6:
						return '未付款'
						break;
					default:
						return ''
						break;
				}
			},
			paytype(e) {
				switch (e) {
					case 'alipay':
						return '支付宝'
						break;
					case 'wechat':
						return '疯传数藏钱包'
						break;
					default:
						return '余额支付'
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dfc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main {
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F7F8FA;

		.order {
			position: relative;
			&-status {
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				width: 100%;
				height: 300rpx;
				padding: 50rpx;
				box-sizing: border-box;
				background: #468EFF;

				&-title1 {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFF;
					// line-height: 56rpx;
					// letter-spacing: 1rpx;
				}
				&-title2 {
					font-size: 24rpx;
					color: #FFF;
					// line-height: 56rpx;
					// letter-spacing: 1rpx;
				}

				&-des {
					// margin-top: 14rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;

					::v-deep .u-count-down__text {
						font-size: 32rpx;
						font-weight: 600;
						color: #fff;
						line-height: 34rpx;
						border-radius: 4rpx;
						border: 2rpx solid #0B63EE;
						padding: 15rpx;
					}
					.statusImg {
						width: 156rpx;
						height: 125rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
				.line {
					position: absolute;
					left: 50%;
					bottom: 74rpx;
					width: 710rpx;
					height: 20rpx;
					background: #0B63EE;
					border-radius: 10rpx;
					border: 2rpx solid #0B63EE;
					transform: translateX(-50%);
				}
			}

			&-goods {
				width: 690rpx;
				position: absolute;
				top: 214rpx;
				left: 50%;
				padding: 28rpx;
				// margin: 0 30rpx;
				background: #FFFFFF;
				border-radius: 0px 0px 8rpx 8rpx;
				transform: translateX(-50%);
				box-sizing: border-box;

				&-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #16172F;
					margin-bottom: 6rpx;
				}

				&-number {
					font-size: 24rpx;
					font-weight: 600;
					color: #999999;
					line-height: 34rpx;
				}

				&-info {
					margin-top: 30rpx;
					display: flex;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 15rpx;
					}

					&-right {
						width: calc(100% - 184rpx);
						margin-left: 24rpx;

						&-title {
							font-weight: 600;
							color: #16172F;
							font-size: 36rpx;
							line-height: 40rpx;
							display: flex;
							flex-direction: row;

							&-label {
								width: 186rpx;
								height: 36rpx;
								background: rgba(233,236,242,0.9000);
								border-radius: 4rpx;
								font-size: 20rpx;
								font-weight: 400;
								color: #A1A1AB;
								text-align: center;
								margin-left: 20rpx;
							}
						}

						&-price {
							font-size: 24rpx;
							// font-weight: bold;
							color: #A1A1AB;
							margin-top: 8rpx;
							line-height: 34rpx;
							display: flex;
							flex-direction: row;

							&-right {
								// width: 250rpx;
								flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								// font-weight: 600;
								// color: #000;

								text {
									font-size: 24rpx;
									// color: #000;
									margin-left: 15rpx;
								}
							}
						}
					}
				}
			}
		}

		.content {
			border-top: 1rpx dashed #E9E9E9;
			padding: 48rpx 34rpx;
			margin-top: 20rpx;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				margin-bottom: 30rpx;
			}

			.cont {
				.item {
					margin-bottom: 22rpx;
					
					.number {
						width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #16172F !important;
					}
					.fzicon {
						height: 32rpx;
						width: 32rpx;
					}

					text:nth-child(1) {
						font-size: 24rpx;
						// font-weight: 600;
						color: #A1A1AB;
						line-height: 36rpx;
					}

					text {
						font-size: 24rpx;
						// font-weight: 600;
						color: #16172F;
						line-height: 36rpx;
					}
				}
				.footer {
					border-top: 1rpx dashed #E9E9E9;
					padding: 45rpx 0;
				}
			}
		}

		.footerNav {
			&-btns {
				display: flex;
				align-items: center;
				padding: 28rpx;
				width: 100%;
				box-sizing: border-box;
				position: fixed;
				left: 0;
				bottom: 0;

				button {
					width: 50%;
					height: 80rpx;
					background: #fff;
					border-radius: 4rpx;
					font-size: 30rpx;
					// border: 1rpx solid #E9E9E9;
					color: #A1A1AB;
					margin: 15rpx;

					&:nth-child(2) {
						color: #FFFFFF;
						background: #468EFF;
					}
				}
				button.back {
					width: 100%;
					height: 80rpx;
					background: #468EFF;
					border-radius: 4rpx;
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
	}
</style>
